<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .lan{
            width: 300px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span>运货单号:</span>
        <el-input v-model="input1" clearable placeholder="请输入运货单号" class="lan" ></el-input>
        <el-button icon="el-icon-search" type="primary" @click="selectOne">查询</el-button><br><br>
        <div>
            已结算<span style="color: red;font-weight: bold">{{jiesuan}}</span>条,未结算<span style="color: red;font-weight: bold">{{nojiesuan}}</span>条
        </div>
        <br>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="序号"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.settlementId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="运货单号"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.shippingNum }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="货物类别"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pKind }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="出发地"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.startPlace }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="目的地"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.endPlace }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="运送距离(km)"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.distance }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="货物重量(T)"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pQuality }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="货物体积(m*3)"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pValue }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="结算状态"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px" v-if="scope.row.settlementStatus==1">
                        已结算
                        </span>
                    <span style="margin-left: 10px;color: red" v-else>
                        未结算
                        </span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button
                            v-if="scope.row.settlementStatus==1"
                            disabled
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">已结算</el-button>
                    <el-button
                            v-else
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">结算</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="curr"
                :page-sizes="[5,10,15,20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="物流管理操作" :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="settlement">
                <el-form-item label="物流公司:" :label-width="formLabelWidth">

                    <el-select v-model="settlement.logisticsName" placeholder="请选择" @change="pat">
                        <el-option
                                v-for="l in logistics"
                                :label="l.logisticsName"
                                :value="l.logisticsId">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="运货单号:"  :label-width="formLabelWidth">

                    <el-input  v-model="settlement.shippingNum" autocomplete="off" readonly></el-input>

                </el-form-item>
                <el-form-item label="货物种类:" :label-width="formLabelWidth">
                    <el-input v-model="settlement.pKind" autocomplete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="订单编号:" :label-width="formLabelWidth">
                    <el-input v-model="settlement.orderNum" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="settlement.number" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="出发地" :label-width="formLabelWidth">
                    <el-input v-model="settlement.startPlace" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="目的地" :label-width="formLabelWidth">
                    <el-input v-model="settlement.endPlace" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="货物重量" :label-width="formLabelWidth">
                    <el-input v-model="settlement.pKind" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="货物体积" :label-width="formLabelWidth">
                    <el-input v-model="settlement.pValue" autocomplete="off" readonly></el-input>
                </el-form-item>

                <el-form-item label="结算金额" :label-width="formLabelWidth">
                    <el-input v-model="settlement.settlementMoney" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" style="text-align:center " class="dialog-footer">
                <el-button type="primary" @click="saveRoles" >结 算</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    jiesuan:"",
                    nojiesuan:"",
                    input1:'',
                    tableData:[],
                    curr:1,
                    pageSize:5,
                    total:0,
                    logistics:"",
                    formLabelWidth:"120px",
                    settlement:{
                        settlementId:"",
                        shippingNum:"",
                        settlementStatus:"",
                        settlementMoney:"",
                        startPlace:"",
                        endPlace:"",
                        distance:"",
                        orderNum:"",
                        pQuality:"",
                        pKind:"",
                        number:"",
                        pValue:"",
                        logisticsName:"",
                    },
                    dialogFormVisible:false,
                    money:[]
                }
            },
            //定义函数区域
            methods:{

                //价格显示
                pat(val){
                    axios.get("/priceDisplay?uname="+val).then(value => {
                        if(value.data.code==1){
                            this.money=value.data.data
                            this.settlement.settlementMoney=this.money[0].price
                        }

                    })

                },
                //显示结算页面
                handleEdit(index, row) {
                    this.settlement=row;
                    this.dialogFormVisible=true;
                },

                //保存用户的方法
                saveRoles(){
                        axios.put("/settlement", this.settlement).then(value => {
                            if (value.data.code == 1) {
                                this.settlement1();
                                this.noSettlement();
                                this.loadPage(this.curr,this.pageSize);
                            }
                        })
                    this.dialogFormVisible= false;
                },

                //关闭结算页面是清空数据
                closeMyDialog(){
                    settlement={
                        settlementId:"",
                            shippingNum:"",
                            settlementStatus:"",
                            settlementMoney:"",
                            startPlace:"",
                            endPlace:"",
                            distance:"",
                            orderNum:"",
                            pQuality:"",
                            pKind:"",
                            number:"",
                            pValue:"",
                            logisticsName:"",
                    }
                },

                //查询单号函数
                selectOne(){
                    this.loadPage(this.curr,this.pageSize)
                },

                //分页的函数
                handleSizeChange(pageSize){
                    this.loadPage(this.curr,pageSize)
                },
                handleCurrentChange(curr){
                    this.loadPage(curr,this.pageSize)
                },

                //分页函数的实现
                loadPage(curr,pageSize){
                    this.curr=curr;
                    this.pageSize=pageSize;
                    if(this.input1==''){
                        axios.get("/settlement?current="+curr+"&pageSize="+pageSize+"&input1="+this.input1).then(value => {
                            if(value.data.code==1){
                                this.tableData=value.data.data.records;
                                this.total=value.data.data.total;
                                this.pageSize=value.data.data.size;
                                this.curr=value.data.data.current;
                            }
                        })
                    }else {
                        axios.get("/settlement?current="+curr+"&pageSize="+pageSize+"&input1="+this.input1).then(value => {
                            if(value.data.code==1){
                                this.tableData=value.data.data.records;
                                this.total=value.data.data.total;
                                this.pageSize=value.data.data.size;
                                this.curr=value.data.data.current;
                            }
                        })
                    }
                },
                //结算与未结算
                settlement1(){
                    axios.get("/jiesuan").then(value => {
                        if(value.data.code==1){
                            this.jiesuan=value.data.data;
                        }
                    })
                },
                noSettlement(){
                    axios.get("/nojiesuan").then(value => {
                        if(value.data.code==1){
                            this.nojiesuan=value.data.data;
                        }
                    })
                }




            },
            //页面加载成功回调
            mounted(){
                this.loadPage(1,5);
                this.settlement1();
                this.noSettlement();
                //查找物流公司
                axios.get("/logisticsAll").then(value => {
                    if(value.data.code==1){
                        this.logistics=value.data.data;
                    }
                });
            }

        })
    </script>
</body>
</html>